<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
</head>
<body>
<h1>一般</h1>
<div id="container" style="height: 400px;"></div>
<h1>无数据</h1>
<div id="container1" style="height: 400px;"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/wordcloud2.js/1.2.2/wordcloud2.js"></script>
<script>
    var option = {
        tooltip: {
            show: true,
            formatter: function(item) {
                return item[0] + ': 价值¥' + item[1] + '<br>' + '词云图'
            }
        },
        list: [['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1], ['谈笑风生', 500000], ['谈笑风生', 50], ['谈笑风生', 40], ['谈笑风生', 40], ['谈笑风生', 30], ['谈笑风生', 30], ['谈笑风生', 20], ['谈笑风生', 20], ['谈笑风生', 1], ['谈笑风生', 1]],
        // list:[["玻璃瓶",941],["塑料瓶",15],["易拉罐",3]],
        color: '#15a4fa',
        shape: 'circle',
        ellipticity: 1
    }
    var wc = new wordcloud2(document.getElementById('container'))
    wc.showLoading({
        backgroundColor: '#fff',
        text: '看见了福建省的附件里是卡洛斯的家乐福就爱上了克拉家乐福及爱丽丝垃圾堆里发简历到复健科了会计师两地分居阿里拉客积分的垃圾费浪费据了解乐山大佛',
        effect: 'spin'
    })
    setTimeout(function() {
        wc.hideLoading()
        wc.setOption(option)
    }, 2000)

    setTimeout(function() {
        wc.setOption({
            noDataLoadingOption: {
                backgroundColor: '#f00',
                text: '暂无数据'
            }
        })
    }, 4000)

    setTimeout(function() {
        wc.setOption(option)
    }, 6000)

    /////////////////
    var option1 = {
        color: '#15a4fa',
        noDataLoadingOption: {
            backgroundColor: '#eee',
            text: '暂无数据',
            textStyle: {
                color: '#f00',
                fontSize: 20
            }
        }
    }
    var wc1 = new Js2WordCloud(document.getElementById('container1'))
    wc1.showLoading()
    setTimeout(function() {
        wc1.hideLoading()
        wc1.setOption(option1)
    }, 2000)

    var option8 = {
        tooltip: {
            show: true,
            formatter: function(item) {
                return item[0] + ': 价值¥' + item[1] + '<br>' + '词云图'
            }
        },
        list: [['华莱士', 500000], ['华莱士', 50], ['华莱士', 40], ['华莱士', 40], ['华莱士', 30], ['华莱士', 30], ['华莱士', 20], ['华莱士', 20], ['华莱士', 1], ['华莱士', 1]],
        color: 'red'
    }
    setTimeout(function() {
        wc1.setOption(option8)
    }, 4000)

    window.onresize = function() {
        wc.resize()
        wc1.resize()
    }
</script>
</body>
</html>